/**
 * Dear programmer:
 * When I wrote this code, only god and I knew how it worked.
 * Now, only god knows it!
 *
 * @author: Pegasus  Date: 2018/11/24 Time: 21:03
 *
 * 客房卫生
 */

import React, {Component} from 'react';
import {
  SafeAreaView,
  View,
  Text,
  ScrollView, TouchableOpacity
} from 'react-native';
import {connect} from 'react-redux';
import {styles} from './RoomHygieneScreen.Style';
import DateDisplayView from "../../../component/DateDisplayView/DateDisplayView"
import DividingLineViewComponent from "../../../component/DividingLineViewComponent/DividingLineViewComponent"
import TitleViewComponent from "../../../component/TitleViewComponent/TitleViewComponent"
import ReportCellViewComponent from "../../../component/ReportCellViewComponent/ReportCellViewComponent"
import {ReportStatus} from "../../../constant/ReportStatus"
import AntDesign from "react-native-vector-icons/AntDesign"
import {COLOR_THEME} from "../../../constant/PHColors"
import Modal from "react-native-modalbox"
import {SCREEN_WIDTH} from "../../../constant/PHScreen"
import TipModalView from "../../../component/TipModalView/TipModalView"
import EmployeeServiceEfficiencyView from "./component/EmployeeServiceEfficiencyView"

class RoomHygieneScreen extends Component {

  static navigationOptions = {
    title: '客房卫生'
  }

  // 构造
  constructor(props) {
    super(props);
    // 初始状态
    this.state = {
      text: ''
    };
  }

  render() {
    return (
      <SafeAreaView style={styles.body}>

        {
          <DateDisplayView
            leftText={'11月29日报表'}
            onClickLeft={() => {
            }}
          />
        }

        <ScrollView style={{flex: 1}}>

          <DividingLineViewComponent lineHeight={10}/>

          {
            <View>
              <TitleViewComponent titleName={'总体数据'}/>
              <DividingLineViewComponent lineHeight={1}/>
              <View>
                <ReportCellViewComponent title={'完成清洁'} context={'4间(6人)'} reportStatus={ReportStatus.None}/>
                <ReportCellViewComponent title={'人均清洁'} context={'0.7间'} reportStatus={ReportStatus.None}/>
              </View>
            </View>
          }

          <DividingLineViewComponent lineHeight={10}/>

          {
            <View>
              <TitleViewComponent titleName={'清洁质量'} displayDescription={true} onClick={() => {
                this.setState({
                  text: '清洁检查率应达到100%更为合理\n清洁检查一次通过率不宜太高或太低，控制在合适范围'
                });
                this.refs.tipModal.open();}
              }/>
              <DividingLineViewComponent lineHeight={1}/>
              <View>
                <ReportCellViewComponent title={'检查率'} context={'50%完成检查'} reportStatus={ReportStatus.None}/>
                <ReportCellViewComponent title={'检查情况'} context={'100%一次通过'} reportStatus={ReportStatus.None}/>
              </View>
            </View>
          }

          <DividingLineViewComponent lineHeight={10}/>

          {
            <View>
              <TitleViewComponent titleName={'员工做房统计'}/>
              <DividingLineViewComponent lineHeight={1}/>
              {/* 列表 */}
              <EmployeeServiceEfficiencyView/>

              {/* 跳转至更多 */}
              <TouchableOpacity activeOpacity={0.8} onPress={this._onClickMore.bind(this)}>
                <View style={styles.moreView}>
                  <Text style={styles.moreText}>
                    更多员工
                  </Text>
                  <AntDesign name={'right'} size={14} style={{color: COLOR_THEME, marginRight: 15}}/>
                </View>
              </TouchableOpacity>
            </View>
          }

          <DividingLineViewComponent lineHeight={10}/>

          {
            <View>
              <TitleViewComponent titleName={'计划卫生'}/>
              <DividingLineViewComponent lineHeight={1}/>
              <View>
                <ReportCellViewComponent title={'完成计划'} context={'0单'} reportStatus={ReportStatus.None}/>
              </View>
            </View>
          }

        </ScrollView>


        <Modal style={{width: SCREEN_WIDTH - 100, height: 120, justifyContent: 'center', alignItems: 'center', borderRadius: 10}} position={"center"}
               ref={"tipModal"}>
          <TipModalView text={this.state.text}/>
        </Modal>

      </SafeAreaView>
    )
  }

  _onClickMore() {
    this.props.navigation.navigate('EmployeeStatisticsScreen')
  }
}

const props = state => {
  return {}
}

export default RoomHygieneScreen = connect(props)(RoomHygieneScreen);